<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta>
    <title>ch03</title>
    <style>
        form table{
            width: 1000px;
            margin: 0 auto;
        }
        #add{
            width: 500px;
            margin: 0 auto;
        }
        #add fieldset{
            padding: 50px;
            border: 1px red solid;
            border-radius: 10px;
        }
    </style>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<form>
    <table border="1" cellspacing = "0">
        <thead>
            <tr>
                <th><input type="checkbox" name="" id="checkAll"><span>全选</span></th>
                <th>商品编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>上货日期</th>
                <th>是否下架</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</form>
<form id="add">
    <fieldset>
        <legend>商品添加</legend>
        <label for="id">商品编号：</label><input type="text" id="id" class="input" ><br/>
        <label for="name">商品名称：</label><input type="text" id="name" class="input"><br/>
        <label for="price">商品价格：</label><input type="text" id="price"  class="input"><br/>
        <label for="date">上货日期：</label><input type="date" id="date" class="input"><br/>
        <label>是否下架：</label><input type="radio" name="xiajia" class="radioYes" checked>是
        <input type="radio" name="xiajia"  class="radioNo">否<br/>
        <input type="button" name="" id="sub" value="添加">
        <input type="button" name="" id="update" value="修改" disabled>
        <input type="button" value="批量删除" id="delAll" disabled>
        <input type="button" value="返回" id="back" style="display: none;">
    </fieldset>
</form>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        // 立即调用 listGood
        $.ajax({
            url: "listGood",
            type: "get",
            dataType: "json",
            success: function(data) {
                listGood(data);
                // 这里可以添加更多的逻辑来处理返回的数据，例如动态填充表格
            }
        });

        // 添加商品
        $("#sub").click(function(){
            var id = $("#id").val();
            var name = $("#name").val();
            var price = $("#price").val();
            var date = $("#date").val();
            var xiajia;
            if($(".radioYes").prop("checked")){
                 xiajia = 1;
            }else{
                 xiajia = 0;
            }
            $.ajax({
                url: "addGood",
                type: "post",
                dataType: "json",
                async: true,
                data: {id: id, name: name, price: price, date: date, xiajia: xiajia},
                success: function(data) {
                    if(data.message === "数据接收失败"){
                        alert("添加失败");
                    }else{
                        $("table tbody").empty();
                        listGood(data);
                        clear();
                    }
                }
            });
        });

        //罗列商品方法
        function listGood(data){
            for(var i = 0; i < data.length; i++){
                var tr = $("<tr></tr>");
                tr.append("<th><input type='checkbox' name='check' class='check'></th>");
                tr.append("<th class='index'>"+data[i].good_id+"</th>");
                tr.append("<th>"+data[i].good_name+"</th>");
                tr.append("<th>"+data[i].good_price+"</th>");
                tr.append("<th>"+data[i].good_date+"</th>");
                if(data[i].good_status == 1){
                    tr.append("<th class='bool'><input type='checkbox' name='xia' checked disabled></th>");
                }else{
                    tr.append("<th class='bool'><input type='checkbox' name='xia' disabled></th>");
                }
                tr.append("<th>" +
                    " <a href='' class='del'>删除</a> " +
                    " <a href='' class='update'>修改</a> " +
                    " <a href='' class='detail'>详细</a> " +
                    "</th>");
                $("tbody").append(tr);
            }
        }
        //删除
        $("table tbody").on("click",".del",function(event){
            event.preventDefault(); 
            var id = $(this).parent().siblings(".index").text();
            $.ajax({
                url: "delGood",
                type: "post",
                dataType: "json",
                data: {id: id},
                success: function(data) {
                    if(data.message === "数据接收失败"){
                        alert("删除失败");
                    }else{
                        $("table tbody").empty();
                        listGood(data);
                    }
                }
            });
        });
       //修改
       $("table tbody").on("click",".update",function(event){
            event.preventDefault();
            detail(this);
            $("#sub").prop("disabled",true);
            $("#update").prop("disabled",false);
            $("#id").prop("disabled",true);
            $("#back").css("display","block");
       });
       //确认修改
       $("#update").click(function(){
        var id = $("#id").val();
        var name = $("#name").val();
        var price = $("#price").val();
        var date = $("#date").val();
        var xiajia;
        if($(".radioYes").prop("checked")){
            xiajia = 1;
        }else{
            xiajia = 0;
        }
        $.ajax({
            url: "updateGood",
            type: "post",
            dataType: "json",
            data: {id: id, name: name, price: price, date: date, xiajia: xiajia},
            success: function(data) {
                if(data.message === "数据修改失败"){
                    alert("修改失败");
                }else{
                    $("table tbody").empty();
                    listGood(data);
                    $("#sub").prop("disabled",false);
                    $("#update").prop("disabled",true);
                    $("#id").prop("disabled",false);
                    clear();
                }
            }
        });
       });
       //详细
       $("table tbody").on("click",".detail",function(event){
            event.preventDefault();
            detail(this);
            $("#sub").prop("disabled",true);
            $("#update").prop("disabled",true);
            $("#delAll").prop("disabled",true);
            $("#back").css("display","block");
       });
       //返回
       $("#back").click(function(){
            $("#sub").prop("disabled",false);
            $("#update").prop("disabled",false);
            $("#delAll").prop("disabled",false);
            $("#back").css("display","none");
       });
        //把tr值循环给input
       function detail(elem){
            var $Parent = $(elem).parent().siblings();
            var $input = $(".input");
            for(let i=0;i<$Parent.length;i++){
                if(i==0){
                    continue;
                }else{
                    $($input).eq(i-1).val($($Parent).eq(i).html());
                }
            }
            var $prev = $(elem).parent().prev(".bool").find("input").prop("checked")
            if($prev){
                $(".radioYes").prop("checked",true);
            }else{
                $(".radioNo").prop("checked",true);
            }
        }
        // 全选
        $("#checkAll").click(function(){
            if(this.checked){
                $("input[name='check']").prop("checked",true);
                $("#delAll").prop("disabled",false);
            }else{
                $("input[name='check']").prop("checked",false);
                $("#delAll").prop("disabled",true);
            }
        });
   
        //清除
        function clear(){
            $("#id").val("");
            $("#name").val("");
            $("#price").val("");
            $("#date").val("");
            $(".radioYes").prop("checked",true);
            $(".radioNo").prop("checked",false);
        }
        //单选改变全选状态
        $("table tbody").on("change",".check",function(){
            if($("input[name='check']").length === $("input[name='check']:checked").length){
                $("#checkAll").prop("checked",true);
            }else{
                $("#checkAll").prop("checked",false);
            }
            if($("input[name='check']:checked").length == 0){
                $("#delAll").prop("disabled",true);
            }else{
                $("#delAll").prop("disabled",false);
            }
        });

        //批量删除
        $("#delAll").click(function(){
            var ids = "";
            $("input[name='check']:checked").each(function(){
                ids += $(this).parent().siblings(".index").text() + ",";
            });
            $.ajax({
                url: "delAllGood",
                type: "post",
                dataType: "json",
                data: {ids: ids},
                success: function(data) {
                    if(data.message === "数据删除失败"){
                        alert("删除失败");
                    }else{
                        $("table tbody").empty();
                        listGood(data);
                    }
                }
            });
        });
   });
</script>
</html>